<template>
  <div>
    <div style="color:#6f7d96">
      对信息进行分组的选择器，能够直观呈现方便用户辨识。在有层级关系，但选项内容较少的场景下使用
    </div>
    <div style="margin-top:20px">
      <span style="color:red">*</span>标题 <e-select v-model="model" style="width: 200px">
        <e-optionGroup label="分组一">
          <e-option
            v-for="item in cityList1"
            :value="item.value"
            :key="item.value"
          >{{ item.label }}</e-option
          >
        </e-optionGroup>
        <e-optionGroup label="分组二">
          <e-option
            v-for="item in cityList2"
            :value="item.value"
            :key="item.value"
          >{{ item.label }}</e-option
          >
        </e-optionGroup>
        <e-optionGroup label="分组三">
          <e-option
            v-for="item in cityList3"
            :value="item.value"
            :key="item.value"
          >{{ item.label }}</e-option
          >
        </e-optionGroup>
      </e-select>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      cityList1: [
        {
          value: '1',
          label: '选项一',
        },
        {
          value: '2',
          label: '选项二',
        },
        {
          value: '3',
          label: '选项三',
        },
      ],
      cityList2: [
        {
          value: '4',
          label: '选项一',
        },
        {
          value: '5',
          label: '选项二',
        },
      ],
      cityList3: [
        {
          value: '6',
          label: '选项一',
        },
        {
          value: '7',
          label: '选项二',
        },
      ],
      model: '',
    }
  },
}
</script>
